<style type="text/less">
    @import "/web/public/public.less";
    #fragment-award{
        background-color: #1c1a1b;
        width: 600px;
        &>.title{
            height: 90px;
            background: url("/web/img/text-zcbjx.png") no-repeat 25px center,#262324;
        }
        .content-wrap{
            position: relative;
            height: 470px;
            font-size: 18px;
            color: #d4af82;

            ul.content-level-1{
                height: 100%;
                padding: 23px 25px;
                overflow: hidden;
                font-weight: bold;
                &>li{
                    height: 57px;
                    &+li{
                        margin-top: 23px;
                    }
                    i{
                        width: 7px;
                        height: 7px;
                        background-color: #d4af82;
                        transform: rotate(45deg);
                        margin-right: 10px;
                    }
                    a{
                        display: inline-block;
                        width: 420px;
                        color: inherit;
                        .ellipsis;
                        vertical-align: middle;
                    }
                    img{
                        width: 90px;
                        height: 56px;
                        vertical-align: middle;
                        border:1px solid #d4af82;
                    }
                }

            }
        }
        /* 滚动轨道 */
        .scroll_bar {
            position: absolute;
            top:0;
            right:10px;
            width: 5px;
            height: 100%;
            background-color: #1c1a1b;
        }
        /* 滚动滑块 */
        .scroll_slider {
            position: absolute;
            top: 0;
            left: 0px;
            width: 5px;
            height: 48px;
            background-color: #000000;
            border-radius:2.5px;
            opacity: .7;
        }
        .scroll_slider:hover{
            opacity: 1;
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<div id="fragment-award">
    <div class="title"></div>
    <div class="content-wrap">
        <ul class="content-level-1">
            <#if prizeSumList?? && (prizeSumList?size>0)>
                <#list prizeSumList as prizeSum>
                    <li>
                        <i></i>
                        <#if prizeSum.prizeUrl?default("")?trim?length gt 1>
                            <a href="${prizeSum.prizeUrl}" target="_blank">${prizeSum.prizeName}</a>
                        <#else>
                            <a href="javascript:">${prizeSum.prizeName}</a>
                        </#if>

                        <img src="${prizeSum.prizeImg}" alt="${prizeSum.prizeName}">
                    </li>
                </#list>
            </#if>
        </ul>
        <div class="scroll_bar">
            <div class="scroll_slider"></div>
        </div>
    </div>

</div>
<script src="/web/lib/scrollBar.js"></script>
<script>
    new CusScrollBar({
        contentSelector: '#fragment-award .content-level-1', //滚动内容区
        barSelector: '#fragment-award .scroll_bar', //滚动条
        sliderSelector: '#fragment-award .scroll_slider' //滚动滑块
    });
</script>